.diy{
	
	.swiper-item{
		width:100%;
		image{
			width:100%;
		}
	}
	.layout{
		margin:10rpx;
        position:relative;
        // border:dashed 1px #cdcdcd;
        height:auto;
        min-height:50px;
        // cursor:pointer;

        &.active{
          // border:dashed 1px #409EFF;
          .handle{
            display:block;
          }
        }

        .handle{
          display:none;
          position:absolute;
          width:100%;

          .handle-item{
            position:absolute;
            width:25px;
            height:25px;
            background-color:#409EFF;
            text-align:center;
            line-height:25px;
            color:#fff;
            cursor:pointer;
          }

          .rubbish {
            top:-1px;
            left:-26px;
          }

          .up{
            top:-1px;
            right:-26px;
          }

          .down{
            top:30px;
            right:-26px;
          }

          .copy{
            top:30px;
            left:-26px;
          }

        }
        .field{

          .rubik{
			navigator{
				height:100%;
				width:100%;
			}
			
            .cube{

            }
          }

          .rubik{
            position:relative;
            //display: flex;
            //justify-content: space-between;
            &.one,&.two-fifth,&.three-fifth,&.four-fifth{
              height:180px;
            }
            &.half,&.third{
              height:120px;
            }
            &.forth{
              height:94px;
            }
            &.half-half{
              height:186px;
            }
            .cube{
              position:absolute;
              display: flex;
              width:100%;
              justify-content: center;
              align-items: center;
              font-size:15px;
              color:#cdcdcd;
              text-align: center;
              // border:dashed 1px #cdcdcd;
              img{
                width: 100%;
                height: 100%;
                position: absolute;
              }
              &.active{
                // border:dashed 1px #409EFF;
              }
              &.one{
                width:100%;
                height:180px;
              }
              &.two-fifth.a,&.three-fifth.a,&.four-fifth.a{
                width:40%;
                height:180px;
              }
              &.two-fifth.b{
                top:0;
                left:40%;
                width:60%;
                height:180px;
              }

              &.three-fifth.b,&.three-fifth.c,&.four-fifth.b{
                width:60%;
                height:90px;
              }
              &.three-fifth.b,&.four-fifth.b{
                top:0;
                left:40%;
              }
              &.three-fifth.c{
                top:90px;
                left:40%;
              }
              &.four-fifth.c,&.four-fifth.d{
                width:30%;
                height:90px;
              }
              &.four-fifth.c{
                top:90px;
                left:40%;
              }
              &.four-fifth.d{
                top:90px;
                left:70%;
              }
              &.half.a,&.half.b{

                width:50%;
                height:120px;
              }
              &.half.a{

              }
              &.half.b{
                top:0;
                right:0;

              }

              &.third.a,&.third.b,&.third.c{
                width:33.3%;
                height:120px;
              }
              &.third.a{
                top:0;
                left:0;
              }
              &.third.b{
                top:0;
                left:33.35%;
              }
              &.third.c{
                top:0;
                right:0;
              }
              &.forth.a,&.forth.b,&.forth.c,&.forth.d{
                width:25%;
                height:94px;
              }
              &.forth.a{
                top:0;
                left:0;
              }
              &.forth.b{
                top:0;
                left:25%;
              }
              &.forth.c{
                top:0;
                left:50%;

              }
              &.forth.d{
                top:0;
                right:0;
              }
              &.half-half{
                width:50%;
                height:93px;
                &.a{
                  top:0;
                  left:0;
                }
                &.b{
                  top:0;
                  right:0;
                }
                &.c{
                  top:50%;
                  left:0;
                }
                &.d{
                  top:50%;
                  right:0;
                }
              }
            }
			&.free{
              display:flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .cube{
                position: relative;
                flex: none;
                overflow: hidden;

                img{
                  top:0;
                  left:0;
                }
                .placeholder{
                  position: absolute;
                  top:33%;
                }
                &.col-1{
                  width:100%;
                  height:750rpx;
                }
                &.col-2{
                  width:50%;
                  height:375rpx;
                }
                &.col-3{
                  width:33.3%;
                  height:250rpx;
                }
                &.col-4{
                  width:25%;
                  height:187.5rpx;
                }
                &.col-5{
                  width:20%;
                  height:150rpx;
                }
                &.col-6{
                  width:16.6%;
                  height:125rpx;
                }
                &.col-7{
                  width:14.27%;
                  height:107.1rpx;
                }
                &.col-8{
                  width:12.5%;
                  height:93.75rpx;
                }
                &.col-9{
                  width:11.1%;
                  height:83.3rpx;
                }
                &.col-10{
                  width:10%;
                  height:75rpx;
                }


              }
            }

            &.two-a{
              height:180px;
              text-align: center;
              .cube{
                display: flex;
                width:100%;
                justify-content: center;
                align-items: center;
                font-size:15px;
                color:#cdcdcd;
                //font-weight:bold;
              }

            }
          }

        }
		&.notice{
			.field{
				display:flex;
				justify-content: space-between;
				align-items: center;
				height:100rpx;
				line-height: 100rpx;
				.laba{
					// width:100rpx;
					width:50rpx;
					height:100rpx;
					// text-align: center;
				}
				.message{
					height:100rpx;
					width:100%;
					
				}
			}
			
		}
		&.category{
			.field{
				display:flex;
				// justify-content: space-between;
				justify-content: space-around;
				flex-wrap: wrap;
				.item{
					text-align: center;
					padding:0 10rpx;
					.img{
						width:100%;
						max-width:150rpx;
						height:150rpx;
						overflow: hidden;
						margin:0 auto;
						image{
							width:100%;
						}
					}
					.text{
						
					}
				}
			}
		}
		
		&.article{
		
			padding:0 10rpx;
			.article-title{
			
			    line-height:2;
			    text-align: center;
			
			}
			.article-item{
			
			    display: flex;
			    line-height:2;
			    justify-content: space-between;
			}
		}
		
    }
}